import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import { Form, Select,Button, Table, Modal, Input } from 'antd';
const Option = Select.Option;
const FormItem = Form.Item;

import scoreActions from './action';
import './styles.less';


class FormComponent extends Component {

  handleSubmit = (e) => {
    e.preventDefault();
    const exam_id = this.props.exam_id;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        this.props.getExamUserList({
          exam_id : values.exam_id,
          user_name : values.user_name,
          user_idcard : values.user_idcard
        })
      }
    });
  }

  export = () => {

    this.props.form.validateFields((err, values) => {
      if (!err) {
        var path = './dba/users/user_'+values.exam_id+'.json';
        this.props.scoreActions.getUserList({
          path
        }).then(data=>{
          var exam_name;
          this.props.list.forEach(item=> {
            if(item.$loki == values.exam_id){
              exam_name = item.exam_name;
            }
          });

          var arr = [], obj ={};
          data.info.forEach(item=>{
            obj = {
              '姓名' : item.user_name,
              '身份证号' : item.user_idcard,
              '地区' : item.user_area,
              '考试成绩' : item.user_score,
              '考场' : item.room_name,
              '考试时间' : item.room_time
            };
            arr.push(obj);
          });
          saveXls(arr,exam_name+'_考试成绩');
        });

      }
    });
  }

  render () {
    const { getFieldDecorator } = this.props.form;
    const list = this.props.list;
    const exam_id = this.props.exam_id;
    const exam_info = exam_id !== '0' ? String(exam_id) : undefined;

    console.log(list,'listlistlist')
    return (
      <Form layout="inline" onSubmit={this.handleSubmit}>
        <FormItem label="考试选择">
          {getFieldDecorator('exam_id', {
            initialValue : exam_info,
            rules: [
              { required: true, message: '请选择一场考试!' },
            ],
          })(
            <Select placeholder="选择考试" style={{width:120}}>
              {
                list && list.map(item=>{
                  return (
                    <Option key={item['$loki']} value={String(item['$loki'])}>{item['exam_name']}</Option>
                  )
                })
              }
            </Select>
          )}
        </FormItem>
        <FormItem label="考生姓名">
          {getFieldDecorator('user_name')(
            <Input placeholder="姓名" />
          )}
        </FormItem>
        <FormItem label="考生身份证">
          {getFieldDecorator('user_idcard')(
            <Input placeholder="身份证" />
          )}
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            htmlType="submit"
          >
            查    询
          </Button>
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            onClick={this.export}
          >
            导出学员成绩
          </Button>
        </FormItem>
      </Form>
    )
  }
}
const SearchForm = Form.create()(FormComponent);

export class Score extends Component {

  constructor (props) {
    super(props);

    /**
     * table头部
     * @type {*[]}
     */
    this.columns = [{
      title: '学员id',
      width: 70,
      dataIndex: '$loki'
    },{
      title: '学员姓名',
      width: 100,
      dataIndex: 'user_name'
    }, {
      title: '身份证',
      width: 150,
      dataIndex: 'user_idcard'
    },{
      title: '所属地区',
      dataIndex: 'user_area'
    },{
      title: '所属考场',
      dataIndex: 'room_name'
    },{
      title: '最终成绩',
      width: 100,
      dataIndex: 'user_score'
    },,{
      title: '操作',
      width: 100,
      render: (text,record,index) => {
        return (
          <span>
            打印合格证
          </span>
        )
      }
    }];

  }

  componentDidMount () {
    const {scoreActions} = this.props;
    const exam_id = parseInt(this.props.params.$loki);
    scoreActions.getExamList();
    if(exam_id){
      this.getExamUserList({
        exam_id
      });
    }
  }

  getExamUserList (formObject) {
    const {scoreActions} = this.props;
    const path = 'dba/users/user_'+formObject.exam_id+'.json'
    scoreActions.getUserList({
      path,
      user_name : formObject.user_name,
      user_idcard : formObject.user_idcard
    }).then(doc=>{
      // console.log(doc);
    })
  }

  render() {

    const {score, scoreActions } = this.props;
    const userlist = score.get('userlist') && score.get('userlist').toArray();
    const examlist = score.get('examlist') && score.get('examlist').toArray();

    const pagination = {
      total : userlist ? userlist.length : 0,
      pageSize : 20
    }

    return (
      <div className="ant-steps-wraper" style={{'margin-top':0}}>

        <div className="ant-user-wraper">
          <SearchForm list={examlist} exam_id={this.props.params.$loki} scoreActions={scoreActions} getExamUserList={this.getExamUserList.bind(this)} />
        </div>

        <div className="ant-table-wraper">
          <Table
            className="ant-room-table"
            bordered
            columns={this.columns}
            dataSource={userlist}
            pagination={pagination}
          />
          {
            pagination.total > 0 && <div className="ant-table-extend">共导入学员<b>{pagination.total}</b>名</div>
          }
        </div>

      </div>
    )
  }

}


export default connect((state)=>{
  return  {
    score: state.get('score')
  }
},dispatch => {
  return {
    scoreActions : bindActionCreators(scoreActions, dispatch)
  }
})(Score);
